<template>
  <div class="app-wrapper">
    <header id="header">
      <div id="top">
        <div class="container">
          <div class="top_left">
            <span>欢迎致电：4008-888-888</span> <span>服务时间：9:30-6:30</span>
          </div>
          <div class="top_right">
            <div id="search" class="wow fadeInUp animated animated" style="visibility: visible; animation-name: fadeInUp;">
              <form
                v-show="menu_state!=='search'"
                name="formSearch"
                class="form-search"
                @submit="submit($event)"
              >
                <input
                  v-model="q"
                  name="q"
                  class="skw"
                  size="12"
                  autocomplete="off"
                >
                <input name="submit" value="" type="submit" class="sub">
              </form>
            </div>
            <span class="span1">微信公众号
              <div class="span2 wow bounceInDown animated animated" style="visibility: visible; animation-name: bounceInDown;">
                <img src="~/assets/layouts/weixin.png" alt="">
              </div>
            </span>
          </div>
        </div>
      </div>
      <div class="container brand">
        <div id="logo">
          <a href="/" title="英联智融">
            <img src="~/assets/layouts/logo.png" alt="英联智融"></a>
        </div>
        <div id="header_right">
          <nav class="navigate">
            <ul>
              <li class="first_menu">
                <nuxt-link to="/" :class="{'current': menu_state === 'index'}">
                  首页
                </nuxt-link>
              </li>
              <li>
                <nuxt-link to="/search" :class="{'current': menu_state === 'search'}">
                  投资项目
                </nuxt-link>
              </li>
              <li>
                <nuxt-link to="/company" :class="{'current': menu_state === 'company'}">
                  免费入驻
                </nuxt-link>
              </li>
              <li>
                <nuxt-link to="/development" :class="{'current': menu_state === 'development'}">
                  行业动态
                </nuxt-link>
              </li>
              <li>
                <nuxt-link to="/news" :class="{'current': menu_state === 'news'}">
                  资讯中心
                </nuxt-link>
              </li>
              <li>
                <nuxt-link to="/about" :class="{'current': menu_state === 'about'}">
                  关于我们
                </nuxt-link>
              </li>
            </ul>
          </nav>
        </div>
      </div>
    </header>
    <nuxt class="nuxt" :style="{minHeight: Height+'px'}" />
    <div class="bottom_wrapper px1100">
      <p>
        © 2021 英联智融
        <a class="text-color" href="https://beian.miit.gov.cn" target="_blank">陕ICP备2021008778号-1</a>
      </p>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
  name: 'Test',
  data () {
    return {
      q: '',
      Height: 0
    }
  },
  computed: {
    ...mapState(['menu_state'])
  },
  mounted () {
    // 动态设置内容高度 让footer始终居底   header+footer的高度是100
    this.Height = document.documentElement.clientHeight - 206
    // console.log('窗口高度', document.documentElement.clientHeight)
    // 监听浏览器窗口变化
    window.onresize = () => { this.Height = document.documentElement.clientHeight - 206 }
  },
  methods: {
    submit (event) {
      event.preventDefault()
      this.$store.commit('setSearchKeyword', this.q)
      this.q = ''
      this.$router.push({ path: '/search' })
    }
  }
}
</script>
<style>
*{
  box-sizing: border-box;
}
.px1100{
  width: 1100px;
  margin: 0 auto;
}
.px1200{
  width: 1200px;
  margin: 0 auto;
}
@media screen and (min-width: 1230px){
  .container {
    width: 1230px;
    margin: 0 auto;
  }
}
.nuxt{
  /*margin-top: -20px;*/
  background-color: #FFFFFF;
  box-sizing: border-box;
}
.app-wrapper{
  background: #f8f8f8;
}

/**顶部**/
#header {
  width: 100%;
  position: relative;
  z-index: 9999;
  /*margin-bottom: 20px;*/
  background: #f8f8f8;
  box-sizing: border-box;
  height: 146px!important;
  overflow: hidden;
  /*box-shadow: darkseagreen 0px 1px;*/
}
#top {
  width: 100%;
  height: 35px;
  line-height: 35px;
  border-bottom: 1px solid #ebebeb;
  background: #f8f8f8;
}
.container{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.top_left {
}
.top_left span {
  display: inline-block;
  font-size: 14px;
  color: #666;
  margin: 0 15px 0 5px;
}
.top_right {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.top_right span {
  display: inline-block;
  font-size: 14px;
  color: #666;
  margin: 0 5px 0 15px;
  cursor: pointer;
}

.span1 {
  position: relative;
}
.span1 .span2 {
  position: absolute;
  right: -10px;
  top: 34px;
  z-index: 1200;
  display: none;
}
.span1:hover .span2 {
  display: block;
}
/*search*/
#search {
  display: inline-block;
  width: 220px;
  margin-right: 23px;
  position: relative;
}
.form-search {
  margin: 0 auto;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.skw {
  display: inline;
  width: 100%;
  text-indent: 10px;
  background: #fff;
  line-height: 26px;
  height: 26px;
  border: 1px solid #dedede;
  color: #666;
  border-radius: 23px;
}
.sub {
  width: 26px;
  height: 26px;
  cursor: pointer;
  position: absolute;
  right: 0;
  top: 0;
  background: url(~/assets/layouts/search.jpg) no-repeat left center;
  border: 0;
}
/*end*/
.brand{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  width: 1200px;
}
#logo {
  margin-left: 60px;
}
#logo img {
  height: 80px;
  margin: 15px 0;
}
#header_right {
}
/*end*/
/*menu*/
.navigate {
  margin: 40px 0 0 0;
  clear: both;
}
/*.navigate ul li:last-child{*/
/*  margin-right: 0;*/
/*}*/

.navigate ul li:last-child a{
  margin-right: 0;
  padding-right: 0;
}
.navigate ul li {
  display: inline-block;
  height: 50px;
  position: relative;
  z-index: 1000;
  text-align: center;
}

.navigate ul li.first_menu {
  background: none;
}
.navigate ul li a {
  padding: 0 20px;
  display: inline-table;
  line-height: 50px;
  height: 50px;
  color: #333;
  text-align: center;
  font-size: 16px;
  font-family: "微软雅黑",sans-serif;
}
.navigate ul li a:hover {
  color: #fd8d43;
  border-bottom: #fd8d43 2px solid;
}
.navigate ul li .current {
  color: #fd8d43;
}
.bottom_wrapper{
  /*position: absolute;*/
  /*bottom: 0;*/
  /*left: 0;*/
  /*margin: 0;*/
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #48474a;
  /*padding-top: 25px;*/
  height: 60px;
  /*margin-top:-100px;*/
  color: #ffffff;
  font-size: 14px;
}
.text-color{
  color: #FFFFFF;
}
/*end*/
</style>
